<template>
  <div class="about">
    <Goback></Goback>
    <div class="dingbu"></div>
    <div class="banner-download" data-reactid="16">
      <div class="imgbox" style="width: 100%;" data-reactid="17">
        <img
          src="//s1.meituan.net/bs/file?f=meis/meishi.mobile:img/app_download_banner.png@794d597"
          alt
        />
      </div>
      <a href="#" class="call-app-btn btn-invisible" data-reactid="19"></a>
      <a href="#" class="download-btn btn-invisible" data-reactid="20"></a>
    </div>

    <!-- :src="i.src" -->
    <div class="nav">
      <ul>
        <li v-for="(item,index) in shuju" :key="item.id" :src="item.img">
          <!-- {{item.name}} -->
          <img :src="item.img" alt />
          <router-link to="pinglun">{{item.name}}</router-link>

          <!-- {{index}} -->
        </li>
      </ul>
    </div>
    <div class="content">
      <!-- <van-row type="flex">

                  

      <van-col span="8"> 1</van-col>
      <van-col span="8"> 1</van-col>
      <van-col span="8"> 1</van-col>

                 
    
      </van-row>-->

      <van-dropdown-menu direction="down">
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
    <div id="contentWrapper" class="nav-bar-wrapper" data-reactid="71" style="min-height: 738px;">
      <!-- {{films}} -->
    <!-- {{}} -->
      <!-- <li v-for="(item,index) in shuju" :key="item.id" :src="item.img"> -->
    <ul>

     
           
       <li v-for="(ite,index) in films" :key="ite.id" :src="ite.img">
           
          <router-link to="keyframes">
       
         <div class="con">
           <div class="con2">
            <img :src="ite.img" alt="">
          </div>  
            
            <div class="con1">
            <p>{{ite.name}}</p>
            <p>
              {{ite.sup}}
            </p>
            <p>
                {{ite.sickname}}
            </p>
            </div>
            <div class="con3">
            <p>
             {{ite.dis}}
             </p>
            </div>
         </div>
         
         </router-link> 
         <!-- <img :src="item.img" alt /> -->
       </li>
    </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";
import Goback from  "@/components/Goback"


import 'vant/lib/index.css';
// import express from 'express'v
import Vant from 'vant';
// Vue.use(Vant);

import { Col, Row } from "vant";
// import { urlencoded } from 'express';

Vue.use(Col);
Vue.use(Row);

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  data() {
    return {

      value1: 0,
      value2: "a",
      value3: "b",
      option1: [
        { text: "全部美食", value: 0 },
        { text: "小吃快餐", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      option3: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      shuju: [
        {
          id: 1,
          name: "火锅",
          img:
            "//p0.meituan.net/codeman/050ce6754d32482c75273e292407f2b312356.png",
        },
        {
          id: 2,
          name: "甜点饮品",
          img:
            "//p0.meituan.net/codeman/e5277d18a450c1fe51c6cda9cff6a9e016621.png",
        },
        {
          id: 3,
          name: "火锅",
          img:
            "//p0.meituan.net/codeman/050ce6754d32482c75273e292407f2b312356.png",
        },
        {
          id: 4,
          name: "火锅",
          img:
            "//p0.meituan.net/codeman/e5277d18a450c1fe51c6cda9cff6a9e016621.png",
        },
        {
          id: 5,
          name: "火锅",
          img:
            "//p0.meituan.net/codeman/050ce6754d32482c75273e292407f2b312356.png",
        },
        {
          id: 6,
          name: "火锅",
          img:
            "//p0.meituan.net/codeman/e5277d18a450c1fe51c6cda9cff6a9e016621.png",
        },
        {
          id: 7,
          name: "火锅",
          img:
            "//p0.meituan.net/codeman/050ce6754d32482c75273e292407f2b312356.png",
        },
        {
          id: 8,
          name: "火锅",
          img:
            "//p0.meituan.net/codeman/e5277d18a450c1fe51c6cda9cff6a9e016621.png",
        },
      ],
    };
  
  },
  components:{Goback},
  computed: {
    ...mapState(['films'])
  },
  methods:{
      async  date(){
      const url="http://localhost:8080/data.json"
      let ret=  await  this.$axios.get(url)
      // console.log(ret.data)
      // this.film=ret.data
      // console.log(this) 
      // return ret
      this.$store.dispatch("films",ret.data)
      // this.$nextTick( )
      }
    },
  
   

  mounted() {
    //  this.$nextTick(this.date())
    this.date()
    // this.$store.dispatch("films",ret.data);

     
   

  // computed:{}
} 
}
</script>

<style  lang='scss' scoped>
.banner-download {
  position: relative;
  min-height: 1.86rem;
  width: 100%;
}

.banner-download:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #c6c0b3;
}

.banner-download img {
  width: 100% !important;
  height: 100%;
}

/* nav */
/* .banner-download + div {
  display: flex;
  background: red !important;
  height: 200px !important;
  width: 100% !important;
} */
/* image-wrapper */
/* .banner-download + div .hot-areas-wrapper { */
/* display: flex; */
/* width: 100%; */
/* background: green;
  height: 100px;

  width: 100px; */

/* justify-content: space-between; */
/* flex-wrap: wrap; */
/* } */

/* .banner-download + div :first-child img {
  width: 60px;
  height: 60px;
  flex-wrap: wrap;
} */
.nav {
  // background: green;
  height: 160px;
  width: 100%;
  margin-top: 4px;
}
.nav ul {
  width: 100%;
  height: 160px;
  display: flex;
  flex-wrap: wrap;
  // &.router-link-exact-active {
  //     color: #42b983;
  //   }
  text-align: center;
  letter-spacing: center;
}
.nav ul li {
  width: 25%;
  height: 80px;
  // background: grey;
  display: flex;
  // text-align: center;
  // letter-spacing: center;
  // line-height: 80px;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.nav ul li img {
  width: 40px;
  height: 40px;
  // text-align: center;
  margin-top: 4px;
}
.nav ul a {
  color: black;
  margin-top: 4px;
}
// .content{
//   width: 100%;
//   display: flex;
//   height: 100px;
// }
// /deep/ .van-row van-row--flex{
//   display: flex;

// }
// van-dropdown-menu__bar
// /deep/ .van-dropdown-menu__bar {
//   display: flex;
//   height: 40px;
//   line-height: 40px;
//   text-align: center;
//   width: 100%;
//   font-size: 14px;

//   background: red;

// }
// /deep/ .van-dropdown-menu__bar>div{
//  flex: 1;
// }
.con{
  padding: 0 10px;
  display: flex;
  width: 100%;
  height: 120px;
  // background: red;
  // justify:center;

  align-items:center;

}

.con img{
  width: 80px;
  height: 80px;
}
.nav-bar-wrapper a{
   color: black;
   font-size: 12px;
   text-decoration: none;
}
.con1{
  display: flex;
  flex-direction: column;
   height: 80px;
  // width: 100px
}
.con p{
  margin-top: 4px;
}
.con :nth-child(3){
  margin-top: 12px;
  color: forestgreen;
}
.con2{
  height: 80px;
  width: 100px

}
.con3{
  margin-left: 140px;
  color: black !important;
}
.nav-bar-wrapper>ul>li{
  border-bottom: 1px grey solid;
}
</style>













